<template>
  <div>
    <van-search
      v-model.trim="value"
      shape="round"
      @keypress="delaySearch"
      @clear="searchHandler"
      placeholder="请输入搜索关键词"
    />
    <div class="search_wrap" v-if="resList.length == 0">
      <div class="hot_title">热门搜索</div>
      <div class="hot_name_wrap">
        <div
          class="hot_item"
          @click="searchFn(obj.first)"
          v-for="(obj, index) in hotList"
          :key="index"
        >
          {{ obj.first }}
        </div>
      </div>
    </div>

    <div class="search_wrap" v-else>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell-group>
          <van-cell
            @click="playHanlder"
            v-for="obj in resList"
            :key="obj.id"
            center
            :title="obj.name"
            :label="obj.artists[0].name"
          >
            <template #right-icon>
              <van-icon name="play-circle-o" size="0.7rem" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-list>
    </div>
  </div>
</template>

<script>
import { hotSearchApi, searchApi } from "@/api";
export default {
  data() {
    return {
      value: "",
      timer: null,
      hotList: [],
      resList: [],
      loading: false,
      finished: false,
    };
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(async () => {
        let arr = await this.searchHandler()
        console.log('arr: ', arr);
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    searchFn(v) {
      this.value = v;
      this.getSearch(v);
    },
    init() {
      this.getHotSearch();
      this.getSearch();
    },
    async getHotSearch() {
      let res = await hotSearchApi();
      this.hotList = res.data.result.hots;
    },
    async getSearch(v, limit = 10) {
      if (!v || v.trim().length == 0) return;
      let res = await searchApi({ keywords: v, limit });
      console.log(res.data.result.songs);
      this.resList = res.data.result.songs || [];
    },
    searchHandler() {
      if (this.value.length <= 0) {
        this.resList = [];
        return;
      }
      this.getSearch(this.value);
    },
    playHanlder() {
      this.$router.push({
        path: "/play",
      });
    },
    delaySearch() {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.searchHandler(this.value);
      }, 1000);
    },
  },
  created() {
    this.init();
  },
};
</script>

<style>
/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}
</style>